<template>
  <button
    class="dh-button"
    ref="_ref"
    :class="{
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled,
      [`dh-button--${type}`]: type,
      [`dh-button--${size}`]: size,
      'is-loading':isLoading
    }"
    :disabled="disabled || isLoading"
    :type="nativeType"
    :autofocus="autofocus"
  >
  <Icon icon="spinner" spin  v-if="isLoading"></Icon>
  <Icon :icon="icon" v-if="icon"></Icon>
   <span>
    <slot></slot>
   </span>
  </button>
</template>
<script lang="ts">
export default { name: "DhButton" };
</script>

<script setup lang="ts">
import { ref } from "vue";
import Icon from '../Icon/Icon.vue'
import type { ButtonProps } from "./buttonType";
//接收参数
withDefaults(defineProps<ButtonProps>(), {
  nativeType: "button",
});
let _ref = ref<HTMLButtonElement>();
defineExpose({
    ref:_ref
})
</script>

<style scoped>

</style>
